<template>
    <div>
        <div class="ls-User__centent ls-card m-t-16">
            <div class="pane-header table-toolbar">
                <!-- <el-button type="text" size="small" slot="trigger" @click="refresh">刷新 </el-button> -->
                <el-button type="primary" size="small" slot="trigger" @click="openAddDrawer">添加视频 </el-button>
                <el-button type="primary" size="small" slot="trigger" @click="multipAddRule" v-if="isDevelopment">批量添加视频规则 </el-button>
            </div>
            <MyTable ref="my_table" :columns="columns" :list-api="tableListApi">
                <template v-slot:poster="{ row }">
                    <div class="flex">
                        <el-image :src="row.poster" style="width: 34px; height: 34px"></el-image>
                    </div>
                </template>
            </MyTable>
            <MyDrawer 
                :title="baseInfoFromDrawerTitle" 
                :visible.sync="baseInfoFormVisible" 
                :mode="baseInfoFromMode"
                :confirm-btn-text="drawerConfirmTitle"
                @submit="submit">
                
                <component 
                    :is="activeComponent" 
                    ref="my_red_envelope_video_edit"
                    :mode="baseInfoFromMode"
                    :edit-info="activeBaseInfo" 
                    :visible.sync="baseInfoFormVisible" 
                    @success="drawerSumbitSuccessHandler"
                ></component>
            </MyDrawer>
        </div>
    </div>
</template>

<script lang="ts">
import {
    Component,
    Ref,
    Vue
} from 'vue-property-decorator'

import {
    apiDelVideo,
    apiGetVideoList
} from '@/api/application/red_envelope_video'
import MyDrawer from '@/components/MyDrawer/MyDrawerIndex.vue'
import MyTable from '@/components/MyTable/MyTableIndex.vue'
import {
    IRedEnvelopeVideoEditFormInfo,
    IRedEnvelopeVideoItem
} from '@/interface/red_envelope_video.d'
import { PageMode } from '@/utils/type'

import RedEnvelopeVideoEdit from './red_envelope_video_edit.vue'

@Component({
    components: {
        MyTable,
        MyDrawer,
        RedEnvelopeVideoEdit,
    }
})

// 红包视频
export default class RedEnvelopeVideoIndex extends Vue {
    @Ref() readonly my_red_envelope_video_edit!: RedEnvelopeVideoEdit
    @Ref() readonly my_table!: MyTable
    tableListApi: any = apiGetVideoList
    columns = [
        {
            prop: 'id',
            label: 'ID',
            width: 50,
        },
        {
            prop: 'poster',
            label: '封面',
            width: 100,
            scopedSlots: { customRender: 'poster' }
        },
        {
            prop: 'title',
            label: '视频标题',
            sortable: true,
        },
        {
            prop: 'duration',
            label: '视频时长',
        },
        {
            prop: 'describe',
            label: '描述',
        },
        {
            prop: 'balance',
            label: '余额',
            width: 100,
            sortable: true,
        },
        {
            prop: 'freeze_balance',
            label: '冻结余额',
            width: 100,
        },
        // video_red_rule
        {
            prop: 'video_red_rule',
            label: '规则条数',
            width: 100,
            formatData: function (val: any[]) {
                // ,//状态 1上架 2下架
                return val.length
            }
        },
        {
            prop: 'status',
            label: '状态',
            width: 100,
            formatData: function (val: string | number) {
                // ,//状态 1上架 2下架
                return val == 1 ? '上架' : '下架'
            }
        },
       
        {
            prop: 'operation',
            label: '操作',
            width: 220,
            operation: [
                { name: '编辑', type: 'text', clickFun: this.openEditDrawer },
                { name: '红包规则', type: 'text', clickFun: this.openRuleBtnClickFun  },
                { name: '删除', type: 'danger', clickFun: this.onDel }
            ]
        }
    ]
    mode: string = PageMode.ADD
    comp = {
        add: RedEnvelopeVideoEdit,
        edit: RedEnvelopeVideoEdit,
    }
    activeComponent:any = null
    baseInfoFromMode: string = PageMode.ADD
    baseInfoFromDrawerTitle: string = '添加红包视频'
    baseInfoFormVisible:boolean=false
    activeBaseInfo:IRedEnvelopeVideoEditFormInfo | null = null
    drawerConfirmTitle: string = ''
    isDevelopment:boolean = false

    created(){
        this.processEnvModeEnvHandler()
    }
    openAddDrawer() {
        this.activeComponent = this.comp.add
        this.activeBaseInfo = null
        this.baseInfoFromMode = PageMode.ADD
        this.baseInfoFromDrawerTitle = '添加红包视频'
        this.baseInfoFormVisible = true
        this.drawerConfirmTitle = ''
    }
    openEditDrawer(row:IRedEnvelopeVideoItem) {
        this.activeComponent = this.comp.edit
        this.activeBaseInfo = Object.assign({}, row)
        this.baseInfoFromMode = PageMode.EDIT
        this.baseInfoFromDrawerTitle = '编辑红包视频'
        this.baseInfoFormVisible = true
        this.drawerConfirmTitle = ''
    }
    openRuleBtnClickFun(row: IRedEnvelopeVideoItem) {
        this.$router.push({
            name: 'red_envelope_video_rule_list',
            params: {
                id: String( row.id)
            }
        })
       
    }
    // 删除视频
    onDel(row: any, index: Number, callback: Function) {
        const id = row.id
        this.$confirm('是否确认删除该视频?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
            .then(() => {
                apiDelVideo({
                    ids: [id]
                })
                    .then(() => {
                        this.$message.success('删除成功!')
                        callback()
                    })
                    .catch(() => {
                        this.$message.success('删除失败!')
                    })
            })
            .catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
    }
   
    submit() {
        if (this.my_red_envelope_video_edit && this.my_red_envelope_video_edit.onSubmit) {
            this.my_red_envelope_video_edit.onSubmit()
        }
       
    }
    drawerSumbitSuccessHandler() {
        this.baseInfoFormVisible = false
         // @ts-ignore
        if (this.my_table && this.my_table.refresh) {
            // @ts-ignore
            this.my_table.refresh()
        }
    }
    processEnvModeEnvHandler(){
        let NODE_ENV = ''
        try{
            NODE_ENV = process.env.NODE_ENV
        }catch(e){
            NODE_ENV= ''
            //TODO handle the exception
        }
        this.isDevelopment = NODE_ENV === "development" ? true :false
    }
    multipAddRule() {
         // @ts-ignore
        if (this.my_table ) {
            // @ts-ignore
            const list = this.my_table.localTableData || []
            const ids = list.map((item:IRedEnvelopeVideoItem) => item.id)
            if (ids.length) {
                this.$router.push({
                    name: 'red_envelope_video_rule_list',
                    params: {
                        id: String(ids[0])
                    },
                    query: {
                        ids: ids.join(",")
                    }
                })
            }
        }
       
    }
    
}
</script>